/* Основной контейнер меню фиксирован сверху страницы */
.topnav {
    background-color: #736f84;
    position: fixed; 
    top: 0; 
    left: 0;
    width: 100%; 
    z-index: 9999;
}

/* Очистка потока блоков */
.topnav::after {
    content: "";
    display: table;
    clear: both;
}

/* Стили для всех ссылок внутри навигации */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 18px;
}

/* Изменение цвета ссылок при наведении */
.topnav a:hover {
    background-color: #928da8;
    color: #d6d1e9;
}

/* Активный класс для выделения текущей страницы */
.active {
    background-color: #645e86;
    color: white;
}

/* Скрытие иконки бургер-меню по умолчанию на ПК */
.topnav .icon {
    display: none;
}

/* ==========================================================================
   Выпадающее меню (Dropdown) — ТОЛЬКО ПО КЛИКУ
   ========================================================================== */

/* Контейнер для выпадающего списка */
.dropdown {
    float: left;
    position: relative; 
}

/* Кнопка "Контакты" полностью копирует стиль обычных ссылок */
.dropdown .dropbtn {
    font-size: 18px;    
    border: none;
    outline: none;
    color: #f2f2f2;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
    cursor: pointer;
    display: block;
}

/* Эффект наведения на саму кнопку "Контакты" (теперь подменю НЕ выпадает автоматически) */
.dropdown:hover .dropbtn {
    background-color: #928da8;
    color: #d6d1e9;
}

/* Контейнер с подпунктами (всплывающее окно на ПК) */
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;       
    left: 0;         
    background-color: #736f84; 
    min-width: 280px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 10000;
}

/* Ссылки внутри выпадающего списка на ПК */
.dropdown-content a {
    float: none !important; 
    color: #f2f2f2;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

/* Наведение на подпункты */
.dropdown-content a:hover {
    background-color: #928da8;
    color: #d6d1e9;
}

/* Раскрытие подменю при клике (когда JS добавляет класс .show) */
.dropdown.show .dropdown-content {
    display: block !important;
}

/* ==========================================================================
   АДАПТИВНОСТЬ: Мобильные устройства (до 600px)
   ========================================================================== */

/* В обычном закрытом состоянии на смартфонах прячем всё, кроме первой ссылки */
@media screen and (max-width: 600px) {
  .topnav a { display: none; }
  .topnav .dropdown { display: none; }
  
  /* Показываем только самую первую ссылку (Главная) */
  .topnav a:first-child {
    display: block;
    float: left;
  }
  
  /* ИСПРАВЛЕНО: Бургер всегда принудительно зафиксирован справа */
  .topnav a.icon {
    display: block !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    float: none !important;
  }
}

/* Когда меню РАСКРЫТО на мобильном (класс .responsive добавлен через JS) */
@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: fixed; 
    top: 0; 
    left: 0;
    width: 100%; 
  }
	
  /* ИСПРАВЛЕНО: Бургер принудительно прибит к правому верхнему углу при любом состоянии */
  .topnav.responsive a.icon {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    display: block !important;
    float: none !important;
    background-color: transparent !important; /* Убирает фон ховера, если нужно */
  }
  
  /* ИСПРАВЛЕНО: Применяем вертикальный список ко всем ссылкам, КРОМЕ бургер-кнопки */
  .topnav.responsive a:not(.icon), 
  .topnav.responsive .dropdown {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
  }

  /* Настройка кнопки "Контакты" для мобильного */
  .topnav.responsive .dropdown .dropbtn {
    width: 100%;
    text-align: left;
  }

  /* Мобильный контейнер подпунктов интегрируется внутрь меню */
  .topnav.responsive .dropdown-content {
    position: relative;
    top: 0;
    display: none; 
    background-color: #645e86; 
    box-shadow: none;
    min-width: 100%;
  }

  /* Смещение подпунктов вправо на мобильных для визуальной вложенности */
  .topnav.responsive .dropdown-content a {
    padding-left: 32px; 
    background-color: #645e86;
    display: block;
  }
}